import React, { useEffect, useState } from "react";
import { NavBar, InfiniteScroll, List, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import http from "../../api/http";
import { ProductCard } from "react-vant";
function Index() {
  const navigate = useNavigate();
  const [list, setlist] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const getlist = async () => {
    const res = await http.get("/api/list",{params:{page}});
    const { code, data } = res.data;
    console.log(data);

    if (code === 200) {
      setlist([...list, ...data]);
      setPage((pre) => pre + 1);
    }
    if (data.length === 0) {
      setHasMore(false);
    }
  };
  useEffect(() => {
    getlist();
  }, []);
  // 3.点击列表项，跳转到详情页，详情页获取路由参数id，根据id请求详情数据渲染在页面中
  const handleToDeitle=(item)=>{
    navigate(`/deitle`,{state:item})
  }
  return (
    <div>
      <NavBar onBack={() => navigate("/")}>更多</NavBar>
      {list?.map((item, ind) => (
        <ProductCard
        onClick={()=>handleToDeitle(item)}
          key={ind}
          price={item.price}
          desc={item.id}
          title={item.title}
          thumb={item.image}
          footer={<Button color="warning">免费</Button>}
        />
      ))}
      <InfiniteScroll loadMore={getlist} hasMore={hasMore} />
    </div>
  );
}

export default Index;
